<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-20 11:37:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-26 10:47:01
-->
<template>
  <div class="product_list page_tem_1" v-loading="loading">
    <!-- 按钮 搜索表单 -->
    <div class="btns">
      <el-form size="small" inline :model="params">
        <el-form-item>
          <el-select clearable v-model="params.productCategoryId">
            <el-option 
              :label="c.name"
              :value="c.id" 
              v-for="c in categoryData.list" 
              :key="c.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="loadProducts">搜索</el-button>
          <el-button @click="toAddHandler">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /按钮 搜索表单 -->
 
    <!-- 数据 -->
    <div class="content">
      <ul class="products">
        <li class="product" @click="toDetails(p.id)" v-for="p in productData.list" :key="p.id">
          <div class="name">{{p.name}} <span class="price">{{p.price}}</span></div>
          <div class="description">{{p.description}}</div>
          <div class="photo">
            <img :src="p.photo" alt="">
          </div>
          <div class="options">
            <el-button type="text" size="small" @click.stop="editHandler(p)">修改</el-button>
            <el-button type="text" size="small" @click.stop="delHandler(p)">删除</el-button>
          </div>
        </li>
      </ul>
    </div>
    <!-- /数据 -->

    <!-- 分页 -->
    <div class="pages">
      <el-pagination
        hide-on-single-page
        small
        background
        layout="prev, pager, next"
        @current-change="pageChangeHandler"
        :page-size="productData.pageSize"
        :current-page="productData.page"
        :total="productData.total">
      </el-pagination>
    </div>
    <!-- /分页 -->

    <!-- 抽屉 -->
    <el-drawer @closed="clearValidate('pc_form')" :title="title" size="50%" :visible.sync="visible">
      <div style="padding:0 .5em">
        <el-form ref="pc_form" :rules="rules" label-width="60px" :model="form" size="small">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="description">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="productCategoryId">
            <el-select clearable v-model="form.productCategoryId">
              <el-option 
                :label="c.name"
                :value="c.id" 
                v-for="c in categoryData.list" 
                :key="c.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图标">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl+'/file/upload'"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
              <img v-if="form.icon" :src="form.icon" class="avatar">
              <el-button type="text" v-else >上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item style="text-align:right">
            <el-button type="primary" @click="submitHandler">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- /抽屉 -->
  </div>
</template>
<script>
import {get, post} from '@/utils/request'
import _ from 'lodash'
export default {
  data(){
    return {
      baseUrl:process.env.VUE_APP_BASE_API,   // 接口基地址
      fileUrl:process.env.VUE_APP_FILE_BASE_URL,  // 文件存储地址
      visible:false,
      loading:false,
      title:"添加产品信息",
      params:{
        page:1,
        pageSize:5
      },    // 参数表单   查询
      form:{},      // 表单，保存/更新
      productData:{},
      categoryData:{},
      rules:{
        name:[{ required: true,message:"请输入分类名称",trigger:'blur', }] ,
        num:[{ required: true,message:"请输入分类序号",trigger:'blur', }] ,
      }
    }
  },
  mounted(){
    this.loadCategories();
    this.loadProducts();
  },
  methods:{
    toDetails(id){
      this.$router.push({
        path:'/base/product_details',
        query:{id}
      })
    },
    delHandler({id}){
      // 1. 询问
      this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        // 2. 删除
        let url = "/product/deleteById"
        get(url,{id}).then(resp =>{
          this.$message.success(resp.message)
          this.loadProducts();
        })
      })
    },
    editHandler(row){
      this.title = "修改产品信息"
      this.form = _.cloneDeep(row);
      this.visible = true;
    },
    clearValidate(ref){
      this.$refs[ref].clearValidate();
    },
    // 提交
    submitHandler(){
      this.$refs.pc_form.validate(valid =>{
        if(valid){
          let url = "/product/saveOrUpdate"
          post(url,this.form).then(resp =>{
            this.$message.success(resp.message)
            this.visible = false;
            this.loadProducts();
          })
        }
      })
    },
    // 附件上传处理
    handleUploadSuccess(resp){
      if(resp.status === 200){
        let {id,groupName} = resp.data;
        let icon_url = this.fileUrl+groupName+'/'+id;
        this.$set(this.form,'photo',icon_url)
      } else {
        this.$message({type:'error',message:resp.message})
      }
    },
    // 去保存
    toAddHandler(){
      this.form = {};
      this.title = "添加产品信息"
      this.visible = true;
    },
    // 加载产品数据
    loadProducts(){
      this.loading = true;
      let url = "/product/pageQuery"
      get(url,this.params).then(resp => {
        this.productData = resp.data;
      }).finally(()=>{
        this.loading = false;
      })
    },
    // 加载栏目数据
    loadCategories(){
      let url = "/productCategory/pageQuery"
      get(url,{page:1,pageSize:100}).then(resp => {
        this.categoryData = resp.data;
      })
    },
    // 分页变动处理函数
    pageChangeHandler(page){
      this.params.page = page;
      this.loadProducts()
    }
  }
}
</script>
<style lang="scss" scoped>
.product_list {
  .content {
    ul.products {
      & > li.product {
        position: relative;
        .name {
          cursor: pointer;
          font-weight: bold;
          font-size: 16px;
          .price {
            color: red;
          }
          .price::before{
            content: '￥';
          }
        }
        .description {
          text-indent: 2em;
          padding:.5em 0;
          line-height: 1.6em;
        }
        .photo {
          width: 200px;
          height: 200px;
          overflow: hidden;
          border-radius: 5px;
          img {
            width: 100%;
          }
        }
        .options {
          position: absolute;
          right:1em;
          top: .2em;
        }
      }
    } 
  }
  
}
</style>
